<template>
  <div class="update-password-container">
    <div class="form-box">
      <a-form
        ref="formRef"
        :model="form"
        :rules="rules"
        name="basic"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
        @finish="handleSubmit"
      >
        <a-form-item label="原密码" name="oldPassword">
          <a-input v-model:value="form.oldPassword" type="password" size="small"></a-input>
        </a-form-item>
        <a-form-item label="新密码" name="newPassword">
          <a-input v-model:value="form.newPassword" type="password" size="small"></a-input>
        </a-form-item>
        <a-form-item label="确认新密码" name="repeatPassword">
          <a-input v-model:value="form.repeatPassword" type="password" size="small"></a-input>
        </a-form-item>
        <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
          <a-button type="primary" html-type="submit" class="login-form-button" :loading="loading">
            保 存
          </a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import useUserStore from '@/stores/user'
import { setPasswordApi } from '@/api/user'
import md5 from 'md5'
import { message } from 'ant-design-vue'

const userStore = useUserStore()
const loading = ref(false)
const rules = {
  oldPassword: [
    {
      required: true,
      trigger: 'change',
      message: '请输入原密码'
    }
  ],
  newPassword: [
    {
      required: true,
      validator: checkPassword,
      trigger: 'change'
    }
  ],
  repeatPassword: [
    {
      required: true,
      validator: checkRepeatPassword,
      trigger: 'change'
    }
  ]
}
const formRef = ref()
const form = ref({
  oldPassword: '',
  rePassword: '',
  newPassword: ''
})

function checkPassword(_rule, value) {
  if (value === '') {
    return Promise.reject('请输入新密码')
  } else if (value === form.value.oldPassword) {
    return Promise.reject('新密码不能和旧密码相同')
  } else {
    // 校验强密码 ^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$
    const objRegExp = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*()_\-+]).{8,20}$/
    if (objRegExp.test(value)) {
      if (form.value.repeatPassword !== '') {
        formRef.value.validateFields('repeatPassword')
      }
      return Promise.resolve()
    } else {
      return Promise.reject('新密码必须包含大小写字母、数字、特殊字符的组合，长度在8-20之间')
    }
  }
}

function handleSubmit() {
  formRef.value
    .validateFields()
    .then(() => {
      let params = {
        setType: 1,
        userID: userStore.userInfo.id,
        newPassword: md5(form.value.newPassword),
        oldPassword: md5(form.value.oldPassword)
      }
      setPasswordApi(params).then(() => {
        message.success('修改成功')
      })
    })
    .catch((err) => {
      console.log(err)
    })
}

function checkRepeatPassword(_rule, value) {
  if (value === '') {
    return Promise.reject('请输入确认密码')
  } else if (value !== form.value.newPassword) {
    return Promise.reject('两次输入不一致!')
  } else {
    return Promise.resolve()
  }
}

onMounted(() => {})
</script>

<style scoped lang="less">
.update-password-container {
  padding: 20px;
  .form-box {
    width: 400px;
  }
}
</style>
